import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';

import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn } from '#/adapter/vxe-table';
import type { MaterialModel } from '#/api/master/models';

import { h } from 'vue';

import { isUndefined } from '@vben/utils';

import {
  useMaterialAttrOptions,
  useMaterialTypeOptions,
} from '#/api/master/models';

import DynamicRuleItem from './dynamic-rule-item.vue';

/**
 * 获取编辑表单的字段配置。
 */
export function useSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      dependencies: {
        triggerFields: ['code'],
        disabled(values) {
          return !isUndefined(values.id);
        },
      },
      fieldName: 'code',
      label: '物料代码',
      rules: 'required',
      formItemClass: 'col-span-2 items-baseline',
    },
    {
      component: 'Input',
      fieldName: 'name',
      label: '物料名称',
      rules: 'required',
      formItemClass: 'col-span-2 items-baseline',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        buttonStyle: 'solid',
        options: useMaterialTypeOptions(),
      },
      fieldName: 'type',
      label: '物料类型',
      rules: 'required',
      defaultValue: 'Finished',
      formItemClass: 'col-span-2 items-baseline',
    },
    {
      component: 'RadioGroup',
      componentProps: {
        options: useMaterialAttrOptions(),
      },
      fieldName: 'attr',
      label: '物料属性',
      rules: 'required',
      defaultValue: 'Key',
      formItemClass: 'col-span-2 items-baseline',
    },
    {
      component: 'Input',
      fieldName: 'model',
      label: '型号',
      formItemClass: 'col-span-2 items-baseline',
    },
    {
      component: 'Input',
      fieldName: 'spec',
      label: '规格',
      formItemClass: 'col-span-2 items-baseline',
    },
    {
      component: 'Input',
      fieldName: 'unit',
      label: '计量单位',
    },
    {
      component: 'Input',
      fieldName: 'supplier',
      label: '供应商',
    },
    {
      component: 'DatePicker',
      componentProps: {
        valueFormat: 'YYYY-MM-DD',
      },
      fieldName: 'manufacturingDate',
      label: '生产日期',
    },
    {
      component: 'DatePicker',
      componentProps: {
        valueFormat: 'YYYY-MM-DD',
      },
      fieldName: 'warehousingDate',
      label: '入库日期',
    },
    {
      component: h(DynamicRuleItem),
      fieldName: 'rules',
      label: '条码规则',
      defaultValue: [],
      help: '$ 表示占位符',
      formItemClass: 'col-span-2 items-baseline',
    },
    {
      component: 'Switch',
      componentProps: {
        checkedValue: 1,
        unCheckedValue: 0,
        checkedChildren: '启用',
        unCheckedChildren: '禁用',
        class: 'w-auto',
      },
      fieldName: 'status',
      label: '状态',
      defaultValue: 1,
      rules: 'required',
    },
    {
      component: 'Textarea',
      componentProps: {
        showCount: true,
        maxlength: 128,
      },
      fieldName: 'remark',
      label: '备注',
      formItemClass: 'col-span-2 items-baseline',
    },
  ];
}

/**
 * 获取表格列配置。
 * @param onActionClick 表格操作按钮点击事件
 */
export function useColumns(
  onActionClick?: OnActionClickFn<MaterialModel>,
): VxeTableGridOptions<MaterialModel>['columns'] {
  return [
    { type: 'seq', width: 60 },
    { field: 'code', title: '物料代码', width: 180 },
    { field: 'name', title: '物料名称', width: 140 },
    {
      field: 'type',
      title: '类型2',
      width: 100,
      cellRender: {
        name: 'CellTag',
        options: useMaterialTypeOptions(),
      },
    },
    {
      field: 'attr',
      title: '属性',
      width: 100,
      cellRender: {
        name: 'CellTag',
        options: useMaterialAttrOptions(),
      },
    },
    { field: 'model', title: '型号', width: 140 },
    { field: 'spec', title: '规格', width: 140 },
    { field: 'unit', title: '计量单位', width: 80 },
    {
      field: 'rules',
      title: '条码规则',
      width: 100,
      slots: { default: 'rules' },
    },
    { field: 'supplier', title: '供应商', width: 120 },
    {
      field: 'status',
      title: '状态',
      width: 100,
      cellRender: { name: 'CellTag', attrs: { useStatus: true } },
    },
    { field: 'remark', title: '备注', minWidth: 100 },
    { field: 'createdTime', title: '创建时间', width: 150 },
    { field: 'updatedTime', title: '修改时间', width: 150 },
    {
      cellRender: {
        attrs: {
          nameField: 'name',
          nameTitle: '物料',
          onClick: onActionClick,
        },
        name: 'CellOperation',
        options: [
          'edit', // 默认的编辑按钮
          'delete', // 默认的删除按钮
        ],
      },
      field: 'operation',
      fixed: 'right',
      title: '操作',
      width: 120,
    },
  ];
}
